<template>
	<view class="bigBox">
		<!-- 头部 -->
		<view class="boxTop">
			<view class="imgBox"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/ic_car01@2x.png"></image></view>
			<view class="boxTopR">
				<view style="font-size:$uni-font-size-custom-e; color: #334483; font-weight: 600;">{{ i18n.ctwfont1 }}</view>
				<view style="font-size: $uni-font-size-custom-b; color: #71727C;">{{ i18n.ctwfont2 }}</view>
			</view>
		</view>
		<!-- 大图 -->
		<view class="bigImgBox">
			<view class="bigImgBoximg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/pic_content01@2x.png"></image></view>
			<view class="bigImgBoxText">
				<view class="bigImgBoxTextTop">
					<view class="">{{ i18n.ctwfont3 }}</view>
					<view class="" style="font-size: $uni-font-size-custom-c;">{{ i18n.ctwfont3_1 }}</view>
					<view class="">{{ i18n.ctwfont3_2 }}</view>
				</view>
				<view class="bigImgBoxTextBottom">
					<view class="">
						<!-- <uni-icons type="checkmarkempty" size="16" style="margin-right: 3px; vertical-align:bottom;"></uni-icons> -->
						<text>{{ i18n.ctwfont4 }}</text>
					</view>
					<view class="">
						<!-- <uni-icons type="checkmarkempty" size="16" style="margin-right: 3px;vertical-align:bottom;"></uni-icons> -->
						<text>{{ i18n.ctwfont5 }}</text>
					</view>
					<view class="">
						<!-- <uni-icons type="checkmarkempty" size="16" style="margin-right: 3px;vertical-align:bottom;"></uni-icons> -->
						<text>{{ i18n.ctwfont6 }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 运输图 -->
		<view class="yunsheImgBox">
			<view class="yunsheImgBoxTitle">{{ i18n.ctwfont7 }}</view>
			<view class="yunsheImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/ic_step_car01@2x.png"></image></view>
			<view class="yunsheImgBoxLinetext">
				<view class="yunsheImgBoxLinetextItem" style="margin-left: 5px;">
					<text class="yunsheImgBoxLinetextItemText">{{ i18n.ctwfont8 }}</text>
				</view>
				<view class="yunsheImgBoxLinetextItem">
					<text class="yunsheImgBoxLinetextItemText">{{ i18n.ctwfont9 }}</text>
				</view>
				<view class="yunsheImgBoxLinetextItem">
					<text class="yunsheImgBoxLinetextItemText">{{ i18n.ctwfont10 }}</text>
				</view>
				<view class="yunsheImgBoxLinetextItem" style="margin-right: 5px;">
					<text class="yunsheImgBoxLinetextItemText">{{ i18n.ctwfont11 }}</text>
				</view>
			</view>
		</view>
		<!-- 展示图 -->
		<uni-row class="iconImgBox">
			<uni-col :span="8">
				<view class="iconImgBoxItem">
					<image style="width: 40px; height: 40px;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/ic_01@2x.png"></image>
					<view class="iconImgBoxItemtext">{{ i18n.ctwfont12 }}</view>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view class="iconImgBoxItem">
					<image style="width: 40px; height: 40px;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/ic_02@2x.png"></image>
					<view class="iconImgBoxItemtext">{{ i18n.ctwfont13 }}</view>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view class="iconImgBoxItem">
					<image style="width: 40px; height: 40px;" mode="scaleToFill" src="/static/icon/OneDrive_9_11-16-2021/2x/ic_03@2x.png"></image>
					<view class="iconImgBoxItemtext">{{ i18n.ctwfont14 }}</view>
				</view>
			</uni-col>
		</uni-row>
		<!-- 详细介绍 -->
		<view class="introduceBox">
			<view class="introduceBoxItem">
				<view class="introduceBoxTiel">{{ i18n.ctwfont16 }}</view>
				<view class="introduceBoxItemText">{{ i18n.ctwfont17 }}</view>
			</view>

			<view class="introduceBoxItem">
				<view class="introduceBoxTiel">{{ i18n.ctwfont18 }}</view>
				<view class="introduceBoxItemText">{{ i18n.ctwfont19 }}</view>
			</view>
			<view class="introduceBoxItem">
				<view class="introduceBoxTiel">{{ i18n.ctwfont20 }}</view>
				<view class="introduceBoxItemText">{{ i18n.ctwfont21 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data: function() {
		return {};
	},
	onLoad(option) {},
	onUnload() {},
	onHide() {},
	created() {},
	destroyed() {},
	computed: {
		i18n() {
			return this.$t('logisticsIntroduction');
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
text {
	word-break: break-all; // 强制换行
}
.bigBox {
	overflow: hidden;
}
.boxTop {
	padding: 15px 15px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	.imgBox {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 1px 5px 1px #ccc;
	}
	.boxTopR {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}
}
.bigImgBox {
	box-shadow: 0 3px 5px 1px #ccc;
	.bigImgBoximg {
		width: 100%;
		height: 250px;
	}
	.bigImgBoxText {
		padding: 15px;
		box-sizing: border-box;
		background-color: #f1f1f1;
		.bigImgBoxTextTop {
			color: #5d5e69;
			font-size: $uni-font-size-custom-d;
			line-height: 18px;
			word-break: break-all; // 强制换行
		}
		.bigImgBoxTextBottom {
			margin-top: 10px;
			font-size: $uni-font-size-custom-d;
			line-height: 16px;
			color: #4f515d;
		}
	}
}
.yunsheImgBox {
	padding: 30px 15px;
	box-sizing: border-box;
	.yunsheImgBoxTitle {
		text-align: center;
		font-size: $uni-font-size-custom-d;
		color: #535460;
		margin-bottom: 13px;
	}
	.yunsheImg {
		width: 100%;
		height: 40px;
	}
	.yunsheImgBoxLinetext {
		display: flex;
		// align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-custom-b;
		line-height: 16px;
		color: #4f515d;
		.yunsheImgBoxLinetextItem {
			position: relative;
			width: 23px;
			display: flex;
			justify-content: center;
		}
		.yunsheImgBoxLinetextItemText {
			position: absolute;
			width: 85px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
}
.iconImgBox {
	padding: 0 10px;
	box-sizing: border-box;
	.iconImgBoxItem {
		margin: 0 5px;
		height: 100px;
		padding-top: 20px;
		box-sizing: border-box;
		border-radius: 2px;
		box-shadow: 2px 2px 5px 1px #e6e6e6;
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		.iconImgBoxItemtext {
			margin-top: 5px;
			font-size: $uni-font-size-custom-a;
			color: #70717b;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
}
.introduceBox {
	padding: 20px 15px;
	box-sizing: border-box;
	.introduceBoxItem {
		margin-bottom: 10px;
		.introduceBoxTiel {
			font-size: $uni-font-size-custom-e;
			color: #424451;
			margin-bottom: 5px;
			// height: 30px;
			// line-height: 30px;
		}
		.introduceBoxTiel::before {
			content: '';
			display: inline-block;
			width: 5px;
			height: 18px;
			vertical-align: middle;
			background-color: #CD001B;
			margin-right: 5px;
		}
		.introduceBoxItemText {
			font-size: $uni-font-size-custom-d;
			color: #71727c;
			line-height: 16px;
			word-break: break-all; // 强制换行
		}
	}
}
</style>
